<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "@tarojs/taro";
import { useShareAppMessage } from "@tarojs/taro";

import Tabs from "./components/Tabs.vue";
import Page from "@/components/common/Page.vue";
import ByButton from "@/components/ui/ByButton.vue";
import PaneStaffList from "./components/PaneStaffList.vue";
import PaneStaffApplyList from "./components/PaneStaffApplyList.vue";

const { params } = useRouter<{
  // 申请商户
  mid: `${number}`;
}>();

const tabList = ["员工", "申请记录"];
const tabActive = ref(0);

useShareAppMessage(() => {
  return {
    title: "吃的嘉年华邀请你加入",
    imageUrl: "/static/images/app-share.jpg",
    path: `/packageMerchant/pages/staff/apply?mid=${params.mid}`,
  };
});

const mid = Number(params.mid);
</script>

<template>
  <Page hidden-header-bg>
    <template #header>
      <view class="bg-primary pb-2">
        <Tabs v-model="tabActive"
              :list="tabList"
              :capsule="false"
              class="!text-lg" />
      </view>
    </template>

    <!-- S 获取商户员工列表 -->
    <PaneStaffList :mid="mid" v-if="tabActive == 0" />
    <!-- E 获取商户员工列表 -->

    <!-- S 申请列表 -->
    <PaneStaffApplyList :mid="mid" v-else />
    <!-- E 申请列表 -->

    <view class="fixed bottom-5 left-1/2 z-10 -translate-x-1/2">
      <ByButton class="w-[360px]" open-type="share">{{ "邀请员工" }}</ByButton>
    </view>
  </Page>
</template>
